<template>
  <div>
    <div class="dataContent">
       <div class="dataContentItem">
          <div class="item" ref="hsechat"></div>
       </div>
       <div class="dataContentItem">
         <div class="item" ref="zsechat"></div>
       </div>
       
    </div>
  </div>
</template>
<script>
export default {
  
  data() {
    return {
   
    }
  },
  mounted() {
    this.creatEchart()
    this.creatEchart2()
  },
  methods: {
    creatEchart(){
      var myechats=this.$echats.init(this.$refs.hsechat)
      var option = {
  title: {
    text: '小区核酸情况'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value',
    boundaryGap: [0, 0.01]
  },
  yAxis: {
    type: 'category',
    data: ['A栋', 'B栋', 'C栋', 'D栋', 'E栋', 'F栋']
  },
  series: [
    {
      name: '应做核算人数',
      type: 'bar',
      data: [600, 800, 600, 1000, 800, 200]
    },
    {
      name: '已做核算人数',
      type: 'bar',
      data: [500, 700, 300, 900, 800, 100]
    }
  ]
};
      myechats.setOption(option)
    },
    creatEchart2(){
      var myechats =this.$echats.init(this.$refs.zsechat)
      var option = {
  title: {
    text: '小区人数统计',
    subtext: '智慧社区',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 600, name: 'A楼栋' },
        { value: 800, name: 'B楼栋' },
        { value: 600, name: 'C楼栋' },
        { value: 1000, name: 'D楼栋' },
        { value: 800, name: 'E楼栋' },
         { value: 200, name: 'F楼栋' },
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};
      myechats.setOption(option)
    }
  },
}
</script>
<style lang="less">

.dataContent{
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  .dataContentItem{
    width: 80%;
    padding: 1vw;
    background: white;
    border-radius: 10px;
    margin: 10px 0;
    .item{
      width: 100%;
      height: 60vh;
    }
  }
}
</style>